<template>
<div class="music-list">
    <div class="back" @click="back"><i class="icon-back"></i></div>
    <h1 class="title" v-html="title" style="color:white"></h1>
    <div class="bg-image" :style="bgstyle" ref="bgImgage">
        <div class="play-wrapper" v-show="scrollY>=0">
            <div class="play" @click="random" ref="playBtn" v-show="songs.length>0">
                <i class="icon-play"></i>
                <span class="text">随机播放全部</span>
            </div>
        </div>
        <div class="filter" ref="filter"></div>
    </div>
    <div class="bg-layer" ref="layer"></div>
    <Scroll class="list" :data="songs" ref="list" 
       @scroll="scroll" :listen-scroll="listenScroll"
       :probe-type="probeType">
        <div>
         <div class="song-list-wrapper">
         <songList :songs="songs" @select="selectItem" :rank="rank"></songList>
        </div>
        </div>
    </Scroll>
    <div v-show="!songs.length" class="loading-container">
        <Loading></Loading>
    </div>
</div> 
</template>
<script>
import Scroll from 'base/scroll/scroll'
import songList from 'base/song-list/song-list'
import Loading from 'base/loading/loading'
import {mapActions} from 'vuex'
import {prefixStyle} from 'common/js/dom'
import {playlistMixin} from 'common/js/mixin'

  const transform = prefixStyle('transform')
  const backdrop = prefixStyle('backdrop-filter')
export default {
  mixins: [playlistMixin],
    components:{
      Scroll,
      songList,
      Loading
    },
    props:{
      bgImage:{
          type:String,
          dafault:""
      },
      songs:{
          type:Array,
          dafault:[]
      },
      title:{
          type:String,
          dafault:""
      },
      rank: {
        type: Boolean,
        default: false
      }
    },
    data(){
       return{
         imageHeight:0,
         scrollY:0,
         miny:0,
         zIndex:0
       }
    },
    computed:{
        bgstyle(){
            return `background-image:url(${this.bgImage})`
        }
    },
    created(){
        this.listenScroll=true
        this.probeType=3
    },
    mounted(){
        this.imageHeight=this.$refs.bgImgage.clientHeight
        this.$refs.list.$el.style.top=`${this.imageHeight}px`
        this.miny=-this.imageHeight+40
    },
    methods:{
       handlePlaylist(playlist) {
        const bottom = playlist.length > 0 ? '60px' : ''
        this.$refs.list.$el.style.bottom = bottom
        this.$refs.list.refresh()
      },
        scroll(pos){
            this.scrollY=pos.y
        },
        back(){
            this.$router.back()
        },
       selectItem(item, index) {
        this.selectPlay({list:this.songs,index})
        // console.log(this.$store.state.playlist)
      },
      random() {
        this.randomPlay({
          list: this.songs
        })
      },
      ...mapActions([
        'selectPlay',
        'randomPlay'
      ])
    },
    watch:{
        scrollY(newY){
            let y=Math.max(this.miny,newY)
            let zIndex=0
            this.$refs.layer.style["transform"]=`translate3d(0,${y}px,0)`
            this.$refs.layer.style["webkitTransform"]=`translate3d(0,${y}px,0)`
            if(newY<this.miny){
                zIndex=10
                this.$refs.bgImgage.style.paddingTop=0
                this.$refs.bgImgage.style.height=40+"px"
            }
            else{
                this.$refs.bgImgage.style.paddingTop='70%'
                this.$refs.bgImgage.style.height=0
            }
            this.$refs.bgImgage.style.zIndex = zIndex
        }
    }
}
</script>
<style lang="stylus" scoped>
.music-list{
    position fixed
    z-index 100
    top 0
    left 0
    right 0
    bottom 0
    background #f2f3f4
    .back{
        position absolute
        top 0
        left 6px
        z-index 50
        .icon-back{
            display block
            padding 10px
            font-size 16px
            color white
        }
    }
    .title{
      position: absolute
      top: 0
      left: 10%
      z-index: 40
      width: 80%
      no-wrap()
      text-align: center
      line-height: 40px
      font-size:16px
      color: white 
    }
    .bg-image{
      position: relative
      width: 100%
      height: 0
      padding-top: 70%
      transform-origin: top
      background-size: cover
      .play-wrapper{
        position: absolute
        bottom: 20px
        z-index: 50
        width: 100%
        .play{
        box-sizing: border-box
          width: 135px
          padding: 7px 0
          margin: 0 auto
          text-align: center
          border: 1px solid white
          color: white
          border-radius: 100px
          font-size: 0 
          .icon-play{
            display: inline-block
            vertical-align: middle
            margin-right: 6px
            font-size: 12px
          }
          .text{
             display: inline-block
            vertical-align: middle
            font-size: 14px 
          }
        }  
      }
      .filter{
        position: absolute
        top: 0
        left: 0
        width: 100%
        height: 100%
        background: rgba(7, 17, 27, 0.4)
      }
    }
    .bg-layer{
      position: relative
      height: 100%
      background:#f2f3f4
    }
    .list{
      position: fixed
      top: 0
      bottom: 0
      height: 100% 
      background #f2f3f4
      .song-list-wrapper{
         position: relative
         overflow: hidden
         margin-left:30px
         margin-right:30px
      }
      .loading-container{
        position: absolute
        width: 100%
        top: 50%
        transform: translateY(-50%)
      }
    }
}
</style>


